
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>规格管理</title>
    <link href="../../lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="../../css/public.css" media="all" rel="stylesheet">
    <link href="../../css/diy/form1.css" rel="stylesheet">
    <script src="../../lib/layui-v2.6.3/layui.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/template-web.js"></script>
    <script src="../../js/lay-module/layuimini/miniTab.js"></script>
</head>
<body>
<div style="background-color: #FFFFFF;height: 200px;border-radius: 15px">
    <div style="padding-left: 40px;padding-top:15px">
        <img height="25" loading="lazy" src="../../images/shouzuo.png" width="25">
        <span>按类别进行检索</span>
    </div>
    <hr>
    <form class="layui-form" style="padding-left: 50px;padding-top: 30px;margin-left: 400px">
        <div class="layui-inline">
            <label class="layui-form-label">类别筛选：</label>
            <div class="layui-input-inline">
                <select id="selectID" lay-filter="selectTest"></select>
            </div>
        </div>
<!--        <div class="layui-form-item" style="display: inline-block;margin-left: 200px">-->
<!--            <div class="layui-input-block">-->
<!--                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-normal" id="selectwhereBtn" type="button">查询-->
<!--            </button>-->
<!--                <button class="layui-btn layui-btn-primary  layui-btn-sm" type="reset">重置</button>-->
<!--            </div>-->
<!--        </div>-->
    </form>
</div>

<div id="commditytable">
    <div id="commdityHr">
        <div style="margin-left: 100px">
            <img height="25" loading="lazy" src="../../images/table.png" width="25">
            <span></span>
        </div>
        <button class="layui-btn layui-btn-primary layui-btn-sm " id="specsaddBtn" style="margin-left: 1300px">添加规格</button>
    </div>
    <div style="width: 1500px">
        <table class="layui-table" id="Tabledemo" lay-filter="specs_demo"></table>
        <div id="demo2"></div>
    </div>
</div>
<script id="forword1" type="text/template">
    <option></option>
    {{each datebate1 value}}
    {{if value.upname==null||value.upname==""}}
    <option value="{{value.id}}">{{@value.name}}</option>
    {{else}}
    <option value="{{value.id}}">{{@value.upname}}/{{@value.name}}</option>
    {{/if}}
    {{/each}}
</script>
</body>
<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var miniTab = layui.miniTab;
        $.get("/kind/getList", function (result) {
            date = {datebate1: result.data}
            mera = template("forword1", date);
            $("#selectID").append(mera);
            form.render();
        })
        $("#specsaddBtn").on('click', function () {
            miniTab.openNewTabByIframe({
                href: "layuiSku/index.html",
                title: "种类规格添加",
            });
        })
    });
</script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var miniTab = layui.miniTab;

        form.on('select(selectTest)', function (data) {
            var specs={
                "kindId":data.value
            }
            table.render({
                elem: '#Tabledemo'
                , where: specs
                , method: 'post'
                , title: '商品类别表'
                , url: '/specs/page' //数据接口
                , contentType: "application/json; charset=utf-8"
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本//解析数据长度
                        "data": res.data//解析数据列表
                    };
                }
                , cols: [[ //表头
                    {field: 'id',title: 'ID',sort: true, fixed: 'left'}
                    , {field: 'name', title: '商品规格名称'}
                    , {field: 'value', title: '商品规格参数'}
                    , {field: 'createTime', title: '创建时间'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]]
            });
            //监听工具条
            table.on('tool(specs_demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('是否删除', function (index) {
                        $.get("/specs/delete", {"id": data.id}, function (ex) {
                            if (ex.code==0) {
                                obj.del();
                                layer.close(index);
                            } else{
                                layer.msg("删除失败")
                            }
                        })

                    });
                }
            });
        });
    })
</script>
</html>